<template>
  <div>
    <v-snackbar
      v-for="(snackbar, index) in snackbars.filter(s => s.show)"
      :key="index + Math.random(3)"
      v-model="snackbar.show"
      :timeout="snackbar.timeout"
      :color="snackbar.color"
      :style="`top: ${index * 60}px; padding-top: 0px`"
      :top="snackbar.top"
      :bottom="snackbar.bottom"
      :left="snackbar.left"
      :right="snackbar.right"
      transition="scroll-y-transition"
    >
      <!--     outlined -->
      {{ snackbar.text }}
    </v-snackbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  // 消息队列
  name: 'SnackbarList',

  computed: {
    ...mapGetters(['snackbars'])
  }
}
</script>

<style lang="scss" scoped></style>
